{% extends "::base.html.twig" %}
{% block title %}{{ parent() }} - Admin{% endblock %}
{% block titre %}{{ parent() }} Création d'un type de groupe{% endblock %}
{% block body %}
<form action="{{ path('page_create') }}" method="post" {{ form_enctype(form) }}>
        <div class="col_5">
            <table>
                <tr>
                    <td>{{ form_label(form.name, "Nom du type de groupe : ") }}</td>
                    <td>{{ form_widget(form.name) }}<span class="rouge"><i>{{form_errors(form.name)}}</i></span></td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>{{ form_label(form.attributs) }}</td>
                </tr>
                <tr>
                    <td>{{ form_widget(form.attributs) }}<span class="rouge"><i>{{form_errors(form.attributs)}}</i></span></td>
                </tr>
                <tr>
                    <td><a href="#" id="add_att" class="btn green medium"><span class="icon small white" data-icon="p"></span> Ajouter un champ</a></td>
                </tr>
                <tr>
                    <td class="record_actions"><a href="{{ path('page') }}" class="btn blue medium"><span class="icon small white" data-icon=":"></span> Retour à la liste</a>&nbsp;&nbsp;
                        <button type="submit" class="blue medium"><span class="icon small white" data-icon="V"></span> Créer le type</button></td>
                </tr>
                {{ form_rest(form) }}
<!-- On charge la librairie jQuery. Ici, je la prends depuis le site jquery.com, mais si vous l'avez en local, changez simplement l'adresse. -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
    var $container = $('#projeta_groupebundle_pagetype_attributs');
	
    // On définit une fonction qui va ajouter un champ.
    function add_att() {
        // On définit le numéro du champ (en comptant le nombre de champs déjà ajoutés).
        index = $container.children().length;

        // On ajoute à la fin de la balise <div> le contenu de l'attribut « data-prototype »,
        // après avoir remplacé la variable $$name$$ qu'il contient par le numéro du champ.
        $container.append(
            $($container.attr('data-prototype').replace(/\$\$name\$\$/g, index))
        );
    }
	
    // On ajoute un premier champ directement s'il n'en existe pas déjà un.
    if($container.children().length == 0) {
        add_att();
    }
	
    // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
    $('#add_att').click(function() {
        add_att();
    });
});
</script>
    </table>
</form>


</div>

{% endblock %}
